<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 全选操作：在购物车勾选商品时，实现点击全选按钮，商品的小圆点也全部选中，   -->
        <div id="all">
            {{msg}}
            <input type="checkbox" class="checkall">
        </div>

        <!-- 商品循环 -->
        <div id="lingle">
            <ul>
                <todo-item v-for="item in lingle"  v-bind:todo='item' v-bind:key='item.id'>

                </todo-item>
            </ul>
        </div>
        

        <div id="all1">
            {{count}}:<text class='n_all'>0</text>
            {{coutprice}}：<text class='n_price'>0</text>   
        </div>
        
        <!--<div class="box">
                商品总数：<text class='n_all'>0</text>
                商品总价：<text class='n_price'>0</text>   
                </div>
            
                全选：<input type="checkbox" class="checkall"><br>
                删除：<input type="checkbox" class='delete'><br>
                删除被选中的商品：<input type="checkbox" class='remove'><br>
                清空购物车：<input type="checkbox" class='cleanall'>
            </div> -->

        <script>
            var all = new Vue({
                el: '#all',
                data: {
                    msg: '全选',
                }
            })
        </Script>

        <script>
            Vue.component('todo-item',{
                props: ['todo'],//组件通过prop接口与父单元进行良好的解耦
                template: '<li><input type="checkbox">单价：<text :text="todo.lingle_price"></text><input type="button" value="-" class="delcrement"><input type="text" class="text" :value="todo.num"><input type="button" value="+" class="increment">小计：<text class="all">{{todo.lingle_allprice}}</text></li>'
            })

            var lingle = new Vue({
                el: '#lingle',
                data: {
                    lingle: [
                        {id: 0,lingle_price: '12.30',num: '1',lingle_allprice: '12.30'},
                        {id: 1,lingle_price: '21.90',num: '1',lingle_allprice: '21.90'},
                        {id: 2,lingle_price: '18.99',num: '1',lingle_allprice: '18.99'},
                        {id: 3,lingle_price: '18.99',num: '1',lingle_allprice: '18.99'}

                    ]
                }
            })
        </script>

        <script>
            var all1 = new Vue({
                el: '#all1',
                data: {
                    count: '全选',
                    coutprice: '99'
                }
            })
        </script>
    
</body>
</html>